<template>
  <div style="height: 85vh; box-shadow: var(--el-border-color-light) 0px 0px 10px">
    <el-splitter>
      <el-splitter-panel size="280" :min="100" :max="400">
        <div class="main-panel">
          <el-tree
            style="width: max-content"
            :data="departmentFlowList"
            default-expand-all
            node-key="key"
          >
            <template #default="{ node, data }">
              <div class="tree-item">
                <i
                  class="iconfont icon-gongsi"
                  v-if="data.nodeType === nodeTypeEnum.corporation"
                ></i>
                <i
                  class="iconfont icon-bumen"
                  v-if="data.nodeType === nodeTypeEnum.department"
                ></i>

                <i
                  class="iconfont icon-a-liucheng4"
                  v-if="data.nodeType === nodeTypeEnum.Flow"
                ></i>
                <!-- svg 可以显示颜色 -->
                <!-- <svg class="iconfont-icon" v-if="data.nodeType === nodeTypeEnum.Flow">
                  <use xlink:href="#icon-a-liucheng4"></use>
                </svg> -->
                <span>&nbsp;{{ node.label }}</span>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="流程申请"
                  placement="right"
                >
                  <el-icon
                    @click="addFlowApplyClick(data.key)"
                    v-if="data.nodeType === nodeTypeEnum.Flow"
                    :size="18"
                    color="#09c309"
                    style="margin-left: 5px; margin-right: 15px"
                    ><CirclePlusFilled
                  /></el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-tree>
        </div>
      </el-splitter-panel>
      <el-splitter-panel
        style="
          border: 1px solid #00152914;
          box-shadow: 0 1px 4px #00152914;
          margin-left: 3px;
          overflow-y: auto;
        "
      >
        <el-row class="rowNavStyle">
          <el-col :span="24" class="colNavStyle">
            <div>
              标题：<el-input
                v-model="queryWhere.ApplyTitle"
                style="width: 240px"
                maxlength="20"
                clearable
                placeholder="请输入申请标题"
              />
            </div>
            <div>
              流程状态：
              <el-select
                clearable
                style="width: 150px"
                v-model="queryWhere.FlowApplyState"
                placeholder="请选流程状态"
              >
                <el-option
                  v-for="item in flowApplyStateList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                />
              </el-select>
            </div>
            <div>
              申请日期：
              <el-date-picker
                v-model="queryWhere.CreateTime"
                type="daterange"
                range-separator="到"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>

            <el-button
              style="margin-left: 10px"
              icon="Search"
              type="primary"
              @click="searchClick"
              >查询</el-button
            >
            <!-- <menuButton
              @addFlowApplyKey="addFlowApplyClick"
              helper-path="pages/aae246"
            ></menuButton> -->
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          stripe
          :border="true"
          row-key="FlowApplyId"
          @selection-change="SelectionChange"
          default-expand-all
          v-loading="loading"
        >
          <el-table-column type="selection" width="55" />

          <!-- 动态列 -->
          <el-table-column
            show-overflow-tooltip
            v-for="itme in columns"
            :key="itme.FieldEnName"
            :prop="itme.FieldEnName"
            :label="itme.FieldCnName"
            :min-width="itme.FieldWidth"
            :sortable="itme.FieldSortable"
            :align="itme.FieldAlign"
            :fixed="itme.FieldFixed === '' ? false : itme.FieldFixed"
          >
            <template v-if="itme.FieldSlot === 'DataState'" #default="DataState">
              <el-tag
                type="success"
                v-if="DataState.row.DataState === DataStateEnum.Enable"
                >启用中</el-tag
              >
              <el-tag type="warning" v-if="DataState.row.DataState === DataStateEnum.Stop"
                >关闭中</el-tag
              >
              <el-tag
                type="danger"
                v-if="DataState.row.DataState === DataStateEnum.Delete"
                >已删除</el-tag
              >
            </template>
            <template
              v-if="itme.FieldSlot === 'FlowApplyState'"
              #default="FlowApplyState"
            >
              <el-tag
                color="#31bdec"
                v-if="FlowApplyState.row.FlowApplyState === FlowApplyStateEnum.InExamine"
                ><span style="color: white">审核中</span></el-tag
              >
              <el-tag
                color="#16b777"
                v-if="FlowApplyState.row.FlowApplyState === FlowApplyStateEnum.AuditPass"
                ><span style="color: white">审核通过</span></el-tag
              >
              <el-tag
                color="red"
                v-if="
                  FlowApplyState.row.FlowApplyState === FlowApplyStateEnum.AuditRefuse
                "
                ><span style="color: white">审核拒绝</span></el-tag
              >
              <el-tag
                color="#ffb800"
                v-if="
                  FlowApplyState.row.FlowApplyState === FlowApplyStateEnum.AuditDismissal
                "
                ><span style="color: white">审核驳回</span></el-tag
              >
              <el-tag
                color="#F56C6C"
                v-if="FlowApplyState.row.FlowApplyState === FlowApplyStateEnum.Cancel"
                ><span style="color: white">作废</span></el-tag
              >
              <el-tag
                color="#67C23A"
                v-if="FlowApplyState.row.FlowApplyState === FlowApplyStateEnum.Filing"
                ><span style="color: white">归档</span></el-tag
              >
            </template>
            <template v-if="itme.FieldSlot === 'UrgentIndex'" #default="UrgentIndex">
              <el-rate
                v-model="UrgentIndex.row.UrgentIndex"
                disabled
                style="height: 10px"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="110" fixed="right">
            <template #default="scope">
              <el-dropdown>
                <el-button type="primary" plain size="small">
                  更多操作<el-icon><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu class="dropdown-menu-class">
                    <dataRowButton
                      :model="scope.row"
                      @progressKey="progressClick"
                      @flowCancelKey="flowCancelClick"
                      @flowFilingKey="flowFilingClick"
                      @carbonCopyKey="carbonCopyClick"
                      :key="updateKey"
                    ></dataRowButton>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <!-- <dataRowButton
                :model="scope.row"
                @progressKey="progressClick"
                @flowCancelKey="flowCancelClick"
                @flowFilingKey="flowFilingClick"
                :key="updateKey"
              ></dataRowButton> -->
            </template>
          </el-table-column>
        </el-table>

        <pageLayout :pageData="page" @pageBnt="pageClick"></pageLayout>
      </el-splitter-panel>
    </el-splitter>
  </div>

  <addFlowApproval
    :is-visibles="addFlowModel.isVisibles"
    :dialogTitle="addFlowModel.dialogTitle"
    :flowId="addFlowModel.flowId"
    @closeBnt="colosClick"
  >
  </addFlowApproval>
  <flowProgress
    :is-visibles="flowProgressModel.isVisibles"
    :dialogTitle="flowProgressModel.dialogTitle"
    :flowApplyId="flowProgressModel.flowApplyId"
    @closeBnt="colosClick"
  >
  </flowProgress>
  <departmentUser
    :is-visibles="departmentUserModel.isVisibles"
    :data-id="departmentUserModel.flowApplyId"
    @closeBnt="colosClick"
    @confirmBnt="confirmClick"
  ></departmentUser>
</template>
<script lang="ts" setup>
import pageLayout from "@/components/page.vue";
import { onMounted, reactive, ref } from "vue";
import { basePageModel, pageCofing } from "@/model/public/public";
import dataRowButton from "@/components/dataRowButton.vue";
import { GetMenuColsByMenuId } from "@/api/publicTool";
import { DataStateEnum, nodeTypeEnum } from "@/enum/public";
import { ElMessage, ElMessageBox } from "element-plus";
import { FlowOutPut } from "@/model/flow";
import {
  FlowApplyExamine,
  GetAllFlowApplyList,
  InsertMessage,
  UpdateFlowApplyState,
} from "@/api/flowApply";
import addFlowApproval from "@/views/flowApproval/myFlow/addFlowApproval.vue";
import flowProgress from "@/views/flowApproval/myFlow/flowProgress.vue";
import { treeOutPut } from "@/model/public/treeModel";
import { GetDepartmentFlow } from "@/api/flow";
import "@/iconfont/iconfont";
import "../../../iconfont/iconfont.css";
import { FlowApplyStateEnum, FlowNodeStateEnum } from "@/enum/flowEnum";
import { FlowApplyInput } from "@/model/flowApply";
import { getFlowApplyStateList } from "@/api/public";
import { selectOutPut } from "@/model/public/selectModel";
import departmentUser from "@/components/departmentUser.vue";
import { MessageTypeEnum } from "@/enum/flowMessageEnum";

//初始加载dom
onMounted(() => {
  GetMenuColsByMenuIdMsg();
  getDepartmentFlowMsg();
  getFlowApplyStateListMsg();
});

//table数据
const tableData = ref<FlowOutPut[]>([]);
//更新key，刷新dom使用
const updateKey = ref(0);
// 选中项
const selectedRows = ref<FlowOutPut[]>([]);
//加载状态
const loading = ref(true);
//部门流程数据
const departmentFlowList = ref<treeOutPut[]>([]);
//流程申请状态
const flowApplyStateList = ref<selectOutPut[]>([]);

//新增流程模型
const addFlowModel = reactive({
  isVisibles: false,
  dialogTitle: "",
  flowId: "",
});

//流程进度模型
const flowProgressModel = reactive({
  isVisibles: false,
  dialogTitle: "",
  flowApplyId: "",
});

//部门人员模型
const departmentUserModel = reactive({
  isVisibles: false,
  flowApplyId: "",
});

//分页
const page = reactive<basePageModel>({
  currentPage: pageCofing.currentPage,
  pageSize: pageCofing.pageSize,
  total: pageCofing.total,
});

//查询条件
const queryWhere = ref<FlowApplyInput>({
  currentPage: pageCofing.currentPage,
  pageSize: pageCofing.pageSize,
  total: pageCofing.total,
  ApplyTitle: "",
  FlowApplyState: undefined,
  CreateTime: "",
  CreateTimeStart: "",
  CreateTimeEnd: "",
});

//获取申请流程数据
const GetAllFlowApplyMsg = async () => {
  page.currentPage = 1;
  GetAllFlowApplyList(queryWhere.value)
    .then(({ data, code, total, msg }) => {
      if (code == 200) {
        tableData.value = data;
        page.total = total;
      } else {
        ElMessage.warning(msg);
      }
      loading.value = false;
      updateKey.value++;
    })
    .catch((_res) => {
      loading.value = false;
    });
};

//查询事件
const searchClick = function () {
  GetAllFlowApplyMsg();
};

//分页点击事件
const pageClick = function (basePageModel: basePageModel) {
  page.currentPage = basePageModel.currentPage;
  page.pageSize = basePageModel.pageSize;
  GetAllFlowApplyMsg();
};

//定义列
const columns = ref<any>([]);

//菜单列
const GetMenuColsByMenuIdMsg = async () => {
  columns.value = await GetMenuColsByMenuId();
  if (columns.value.length > 0) {
    GetAllFlowApplyMsg();
  } else {
    loading.value = false;
    columns.value = [];
  }
};

//获取部门流程数据
const getDepartmentFlowMsg = function () {
  departmentFlowList.value = [];
  GetDepartmentFlow().then(({ data, code, msg }) => {
    if (code == 200) {
      departmentFlowList.value = data;
    } else {
      ElMessage.warning(msg);
    }
  });
};

//获取流程申请状态
const getFlowApplyStateListMsg = function () {
  flowApplyStateList.value = [];
  getFlowApplyStateList().then(({ data, code, msg }) => {
    if (code == 200) {
      flowApplyStateList.value = data;
    } else {
      ElMessage.warning(msg);
    }
  });
};

//新增
const addFlowApplyClick = function (key: string) {
  addFlowModel.isVisibles = true;
  addFlowModel.dialogTitle = "新增流程";
  addFlowModel.flowId = key;
};

//审核进度事件
const progressClick = function (row: any) {
  flowProgressModel.isVisibles = true;
  flowProgressModel.dialogTitle = `流程【${row.ApplyTitle}】的审核进度`;
  flowProgressModel.flowApplyId = row.FlowApplyId;
};

//作废
const flowCancelClick = (row: any) => {
  const title = ref<string>("你确定要作废【" + row.ApplyTitle + "】申请吗？");
  ElMessageBox.confirm(title.value, "提示消息", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      UpdateFlowApplyState({
        flowApplyId: row.FlowApplyId,
        flowApplyState: FlowApplyStateEnum.Cancel,
      }).then(({ code }) => {
        if (code == 200) {
          GetAllFlowApplyMsg();
          ElMessage.success("作废成功");
        }
      });
    })
    .catch(() => {
      //取消
    });
};

//归档
const flowFilingClick = (row: any) => {
  const title = ref<string>("你确定要归档【" + row.ApplyTitle + "】申请吗？");
  ElMessageBox.confirm(title.value, "提示消息", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      FlowApplyExamine({
        FlowApplyId: row.FlowApplyId,
        ExamineNodeId: row.CurrentNodeId,
        ExamineState: FlowNodeStateEnum.Filing,
      }).then(({ code }) => {
        if (code == 200) {
          GetAllFlowApplyMsg();
          ElMessage.success("归档成功");
        }
      });
    })
    .catch(() => {
      //取消
    });
};

//抄送事件
const carbonCopyClick = (row: any) => {
  departmentUserModel.isVisibles = true;
  departmentUserModel.flowApplyId = row.FlowApplyId;
};

//抄送事件确认
const confirmClick = function (model: treeOutPut[]) {
  if (model.length > 0) {
    InsertMessage({
      flowApplyId: departmentUserModel.flowApplyId,
      recipientKeys: model.map((f) => f.key).join(","),
      messageType: MessageTypeEnum.CarbonCopy,
    }).then(({ code }) => {
      if (code == 200) {
        departmentUserModel.isVisibles = false;
        departmentUserModel.flowApplyId = "";
        GetAllFlowApplyMsg();
        ElMessage.success("抄送成功");
      }
    });
  } else ElMessage.warning("请选择抄送人");
};

//复选框事件
const SelectionChange = (val: FlowOutPut[]) => {
  selectedRows.value = val;
};

//关闭弹出层
const colosClick = function () {
  addFlowModel.isVisibles = false;
  flowProgressModel.isVisibles = false;
  departmentUserModel.isVisibles = false;
  departmentUserModel.flowApplyId = "";
  GetAllFlowApplyMsg();
};
</script>

<style scoped>
.main-panel {
  height: 100%;
}
.tree-item {
  min-width: max-content;
  display: flex;
}
.dropdown-menu-class {
  display: grid;
}
.dropdown-menu-class > * {
  margin: 5px;
}
</style>
